<template>
	<view class="com-content">
		<!--赛事详情页-->
		<image class="com-top" :src="datalist.onload_img"></image>
		<view class="com-body">
			<!-- <view class="con-cksg" v-if="datalist.signsta===5" @click="tomatched">
				<view class="con-title">查看赛果</view>
				<view class="icons icon-gengduo"></view>
			</view> -->
			<view class="body-box">
				<view class="con-tit">
					<view class="con-title">{{datalist.title}}</view>
					<view class="con-sta"
						:style="{color:datalist.signsta===1?'#02BB6F':datalist.signsta===4?'#333333':datalist.signsta===2?'#02BB6F':datalist.signsta===3?'#333333':datalist.signsta===5?'#FE5050':''}">
						{{datalist.signsta===1?'报名中':datalist.signsta===4?'报名结束':datalist.signsta===2?'报名中':datalist.signsta===3?'待开赛':datalist.signsta===5?'已结束比赛':''}}
					</view>
				</view>
				<view class="con-txt"><text class="iconsj icons icon-shijianjiangxu"></text>报名时间：{{datalist.signtime}}
				</view>
				<view class="con-txt"><text
						class="iconsj icons icon-shijianjiangxu"></text>开赛时间：{{datalist.game_start_time}}</view>
				<view class="con-txt">主办方：{{datalist.sponsor}}</view>
				<view class="con-txt">检录地点：{{datalist.sign_site}}</view>
			</view>
			<view class="body-box">
				<block v-for="(item,index) in datalist.group_data" :key="index">
					<view class="con-li">
						<view class="con-li-l">
							<view class="con-li-l-txt">{{item.title}}({{item.number}}人)</view>
							<view class="con-li-line"></view>
						</view>
						<view class="con-li-r"><text class="con-li-m">¥{{item.money}}</text>/队</view>
					</view>
				</block>
			</view>
			<view class="body-box"
				:style="{'margin-bottom':foot_is_show == false?'20rpx':(datalist.signsta===1 || datalist.signsta===2|| datalist.signsta===3|| datalist.signsta===4)?'120rpx':datalist.signsta===5?'20rpx':'20rpx'}">
				<view class="con-title">赛事介绍</view>
				<rich-text class="con-text" :nodes='datalist.remarks' decode='true'></rich-text>
			</view>
		</view>
		<template v-if="foot_is_show">
			<view class="com-foot" @click="todetail" v-if="datalist.signsta===1|| datalist.signsta===2"
				:style="{color:(datalist.signsta===1 || datalist.signsta===2)?'#fff':'#999',background:(datalist.signsta===1 || datalist.signsta===2)?'#02BB6F':'#ddd'}">
				立即报名</view>
			<view class="com-foot" v-else-if="datalist.signsta===3 || datalist.signsta===4"
				:style="{color:(datalist.signsta===1 || datalist.signsta===2)?'#fff':'#999',background:(datalist.signsta===1 || datalist.signsta===2)?'#02BB6F':'#ddd'}">
				报名结束</view>
		</template>


	</view>
</template>

<script>
	import uniSection from "@/components/uni-section/uni-section.vue"
	export default {
		components: {
			uniSection
		},
		props: {
			foot_is_show:{
				type: [Boolean ,String],
				default: false
			},
			datalist: {
				type: Object,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				/* onload_img: '',
				signsta: '2',
				datalist: {
					img: '',
					title: '',
					signtime: '',
					statime: '',
					sponsor: '',
					address: '',
					contxt: ''
				}, */
			}
		},
		methods: {
			todetail() {
				this.$emit('onclick2')
			},
			tomatched() {
				this.$emit('onclick1')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.com-content {
		display: flex;
		flex-direction: column;

	}

	.com-top {
		width: 100%;
		height: 380rpx;
	}

	.com-foot {
		position: fixed;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: boldl;
		height: 100rpx;
		width: 100%;
		bottom: 0;
	}

	.com-body {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;

		.con-cksg {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			background-color: #FE5050;
			color: #FFFFFF;

			.con-title {
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.body-box {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 32rpx 30rpx;
			line-height: 60rpx;
			width: 100%;

			.con-tit {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.con-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					width: calc(100% - 160rpx);
				}

				.con-sta {
					font-size: 28rpx;
					font-weight: 500;
					width: 160rpx;
					text-align: right;
				}
			}

			.con-txt {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;

				.iconsj {
					margin-right: 15rpx;
				}
			}

			.con-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;

				.con-li-l {
					flex: 1;
					display: flex;
					align-items: center;

					.con-li-l-txt {
						width: 250rpx;
					}

					.con-li-line {
						flex: 1;
						height: 1rpx;
						margin-right: 30rpx;
						background-color: #eee;
					}
				}

				.con-li-r {
					font-weight: bold;
					color: #333;

					.con-li-m {
						color: #FE5050;
					}
				}
			}

			.con-text {
				width: 100%;
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #666;
				line-height: 40rpx;

				image {
					width: 100% !important;
					max-width: 100% !important;
				}
			}
		}
	}
</style>
